<template>
  <view class="container">
    <view
      v-for="(item, index) in displayedHistoryList"
      :key="index"
      @click="gotoDetail(item)"
      class="history-item"
    >
      <text class="title">{{ item.title }}</text>
      <view class="info">
        <text class="author">{{ item.author }}</text>
        <text class="time">{{ item.time }}</text>
      </view>
    </view>

    <view class="load-more" v-if="hasMoreData && !loading" @click="loadMore">
      <text>加载更多</text>
    </view>

    <view class="no-more-data" v-else-if="!hasMoreData">
      <text>没有更多数据了</text>
    </view>

    <view class="loading" v-if="loading">
      <text>加载中...</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      browseHistoryList: [
        { title: 'javase入门', author: '曹操', time: '2021-5-1 20:21:43' },
        { title: 'javase的三大特性', author: '刘备', time: '2001-5-21 12:41:03' },
        { title: 'Mybatis入门', author: '孙权', time: '2021-5-1 20:21:43' },
        { title: 'sping基础', author: '曹丕', time: '2021-5-1 20:21:43' },
        { title: 'java日志门面之JCL和SLF4J', author: '孙尚香', time: '2024-12-1 01:51:43' },
        { title: 'Java Thread类必会小技巧', author: '郭嘉', time: '2011-10-11 00:21:33' },
        { title: 'Java Deeplearning4j：构建和训练卷积神经网络（CNN）模型', author: '曹操', time: '2021-5-1 20:21:43' },
        { title: 'java spring validation 自动、手动校验', author: '李儒', time: '2021-5-1 20:21:43' },
        { title: 'Tomcat安装和配置（超详细）', author: '吕蒙', time: '2021-5-1 20:21:43' },
        { title: '为什么都说“一入Java深似海”？', author: '刘禅', time: '2021-5-1 20:21:43' },
        { title: '枚举类型在 Java 中的应用与示例', author: '何太后', time: '2021-5-1 20:21:43' },
        { title: 'Java数据结构之ArrayList', author: '曹操', time: '2021-5-1 20:21:43' },
        { title: '解决：IDEA java: 警告: 源发行版 17 需要目标发行版 17', author: '曹操', time: '2021-5-1 20:21:43' },
        { title: '详解Java之Spring MVC篇一', author: '刘备', time: '2001-5-21 12:41:03' },
        { title: 'Java基础系列：反射、枚举、lambda表达式', author: '孙策', time: '2021-5-1 20:21:43' },
        { title: 'c++内存管理技巧与模版编程基础', author: '曹冲', time: '2021-5-1 20:21:43' },
      ],
      displayedHistoryList: [],
      itemsToShow: 10,
      hasMoreData: true,
      loading: false,
    };
  },
  mounted() {
    this.loadInitialData();
  },
  methods: {
    loadInitialData() {
      this.sortHistoryList();
      this.displayedHistoryList = this.browseHistoryList.slice(0, this.itemsToShow);
      this.checkMoreData();
    },
    loadMore() {
      if (this.loading || !this.hasMoreData) return;
      this.loading = true;
      setTimeout(() => {
        const currentLength = this.displayedHistoryList.length;
        const nextItems = this.browseHistoryList.slice(currentLength, currentLength + this.itemsToShow);
        this.displayedHistoryList = this.displayedHistoryList.concat(nextItems);
        this.checkMoreData();
        this.loading = false;
      }, 1000);
    },
    checkMoreData() {
      const currentLength = this.displayedHistoryList.length;
      this.hasMoreData = currentLength < this.browseHistoryList.length;
    },
    sortHistoryList() {
      this.browseHistoryList.sort((a, b) => new Date(b.time) - new Date(a.time));
    },
    gotoDetail(item) {
      console.log('Navigating to detail for:', item);
      uni.navigateTo({
        url: '/pages/liveDisplay/liveDisplay',
      }).catch((err) => {
        console.error('Navigation error:', err);
      });
    },
  },
  onReachBottom() {
    if (this.hasMoreData) {
      this.loadMore();
    }
  },
};
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #f0f4f8; /* 背景颜色 */
  border-radius: 10rpx; /* 圆角 */
}

.history-item {
  display: flex;
  flex-direction: column;
  padding: 15rpx;
  margin-bottom: 10rpx; /* 添加底部间距 */
  border-radius: 8rpx; /* 圆角 */
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); /* 添加阴影 */
  background-color: #ffffff; /* 背景颜色 */
  transition: transform 0.2s; /* 添加过渡效果 */
}

.history-item:hover {
  transform: scale(1.02); /* 添加缩放效果，提升交互感 */
}

.title {
  font-size: 18px; /* 增大标题字体 */
  font-weight: bold;
  color: #2c3e50; /* 深色标题 */
}

.info {
  display: flex;
  justify-content: space-between;
  margin-top: 5rpx;
  font-size: 14px; /* 调整信息字体大小 */
  color: #7f8c8d; /* 中性色 */
}

.author {
  font-weight: 500; /* 加粗作者名 */
  color: #ff6a00; /* 作者名 */
}

.time {
  font-style: italic; /* 斜体时间 */
  color: #95a5a6; /* 浅色时间 */
}

.load-more {
  text-align: center;
  padding: 10rpx;
  color: #3498db;
  cursor: pointer;
  border-radius: 5rpx; /* 圆角 */
  margin-top: 10rpx; /* 添加间距 */
}

.no-more-data {
  text-align: center;
  padding: 10rpx;
  color: #999;
}

.loading {
  text-align: center;
  padding: 10rpx;
  color: #3498db; /* 加载中颜色 */
}
</style>



<!-- browseHistoryList: [
        { title: 'javase入门', author: '曹操', time: '2021-5-1 20:21:43' },
        { title: 'javase的三大特性', author: '刘备', time: '2001-5-21 12:41:03' },
        { title: 'Mybatis入门', author: '孙权', time: '2021-5-1 20:21:43' },
        { title: 'sping基础', author: '曹丕', time: '2021-5-1 20:21:43' },
        { title: 'java日志门面之JCL和SLF4J', author: '孙尚香', time: '2024-12-1 01:51:43' },
        { title: '【多线程奇妙屋】 Java 的 Thread类必会小技巧', author: '郭嘉', time: '2011-10-11 00:21:33' },
        { title: 'Java Deeplearning4j：构建和训练卷积神经网络（CNN）模型', author: '曹操', time: '2021-5-1 20:21:43' },
        { title: 'java spring validation 自动、手动校验', author: '李儒', time: '2021-5-1 20:21:43' },
        { title: 'Tomcat安装和配置（超详细）', author: '吕蒙', time: '2021-5-1 20:21:43' },
        { title: '为什么都说“一入Java深似海”？', author: '刘禅', time: '2021-5-1 20:21:43' },
        { title: '【Java基础系列】枚举类型在 Java 中的应用与示例', author: '何太后', time: '2021-5-1 20:21:43' },
        { title: 'Java数据结构之ArrayList', author: '曹操', time: '2021-5-1 20:21:43' },
        { title: '彻底解决：IDEA java: 警告: 源发行版 17 需要目标发行版 17', author: '曹操', time: '2021-5-1 20:21:43' },
        { title: '详解Java之Spring MVC篇一', author: '刘备', time: '2001-5-21 12:41:03' },
        { title: '【JavaSE】反射、枚举、lambda表达式', author: '孙策', time: '2021-5-1 20:21:43' },
        { title: '【c++篇】：从基础到实践--c++内存管理技巧与模版编程基础', author: '曹冲', time: '2021-5-1 20:21:43' },
      ], -->